<template>
  <ul class="nb-tabbar">
    <li
      v-for="tab in tabs"
      :key="tab.path"
      :class="{'nb-tabbar-item': true, 'current': $route.path.includes(tab.path)}"
      :to="tab.path"
      @click="switchTab(tab.path)"
    >
      <div v-if="tab.path === '/cart' && cartTotalCount !== 0" class="nb-cart-badge">{{cartTotalCount | numberCut}}</div>
      <i v-html="tab.icon" />
      <span>{{tab.title}}</span>
    </li>
  </ul>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    tabs: Array
  },
  methods: {
    switchTab (tabPath) {
      if (!this.$route.path.includes(tabPath)) {
        this.$router.push(tabPath)
      }
    }
  },
  computed: {
    ...mapGetters([
      'cartTotalCount'
    ])
  }
}
</script>

<style lang="scss" scoped>
.nb {
  &-cart-badge {
    position: absolute;
    right: 0;
    top: -5px;
    padding: 0 3px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    background-color: #F00;
    color: #FFF;
    border-radius: 9px;
    text-align: center;
    min-width: 16px;
  }
  &-tabbar {
    height: 64px;
    display: flex;
    border-top: 1px solid #dedede;
    background-color: #f2f2f2;

    &-item {
      flex: 1;
      text-align: center;
      color: #666;
      position: relative;

      &.current {
        color: #F00;
      }
      & > i {
        font-family: 'nbfont';
        font-size: 32px;
        line-height: 44px;
      }
      & > span {
        display: block;
        font-size: 14px;
        line-height: 20px;
      }
    }
  }
}
</style>
